$(document).ready(function(){
	//$('input[type=file]').bootstrapFileInput();
	//$('.file-inputs').bootstrapFileInput();
	//隐藏
	$("#static_string_element").hide();
	$("#dynamic_string_element").hide();
	$("#point_element").hide();
	$("#line_element").hide();
	$("#rectangle_element").hide();
	//$("#display_data_variable").hide();
	//$("#data_entity_variable").hide();
	
	//add connection of Arinc661
	$("#add_connection").click(function(){
		$("#add_connection_panel").modal('hide');
		var count = $("#connections_table tbody tr").length + 1;  //行标 //不使用size()，开销比较小
		var connections = $("input[name='connections']").val();  //获取原来的值
		var numTd = $("<td></td>").text(count);   //行标td
		var suite = $("#suite_variable");        //文件
		var suiteTd = $("<td></td>").text(suite.val());  //文件td
		var psIOTd = $("<td></td>");        //输入输出td
		var psIO = $("#ps_radio_group input[checked]");  //取得单选框
		psIOTd.text(psIO.parent().text());   //设置单选框的值
		var panel = $("#panel_variable");   //panel
		var panelTd = $("<td></td>").text(panel.val());  //panel td
		var tr = $("<tr></tr>").append(numTd).append(suiteTd).append(psIOTd).append(panelTd);  //拼成一行
		
		connections += suite.val();
		connections += ":";
		connections += psIO.val();
		connections += ":";
		connections += panel.val();
		connections += "|";
		$("input[name='connections']").val(connections);  //写入隐藏的字段
		$("#connections_table tbody").append(tr);  //行加到 tbody
	});
	
	$("#view_page_info").click(function(){
		$("#page_info_panel").modal('hide');
	});
	
	$("#ps_radio_group label").click(function(){
		$(this).children().attr("checked", true);
		$(this).siblings().children().removeAttr("checked");     
	});
	
	$("#element_radio_group label").click(function(){
		$(this).children().attr("checked", true);
		$(this).siblings().children().removeAttr("checked");
		var elementId = $(this).children().attr("id").replace("element_radio","element");
		$("#elements_div>div").each(function(){
			if ($(this).attr("id") == elementId){
				$(this).show();
			}else{
				$(this).hide();
			}
		});
	});
	
//	$("#variable_radio_group label").click(function(){
//		$(this).children().attr("checked", true);
//		$(this).siblings().children().removeAttr("checked");
//		var variableId = $(this).children().attr("id").replace("variable_radio","variable");
//		$("#variables_div>div").each(function(){
//			if ($(this).attr("id") == variableId){
//				$(this).show();
//			}else{
//				$(this).hide();
//			}
//		});
//	});
	

	
	
	//详细信息
	$("button[name='view_page']").click(function(){
		var dpcUri = $("input[name='dpcUri']").val();
		var id = $(this).siblings('input[name="id"]').val();
//		var jsonStringList = [];
//		jsonStringList.push({dpiFileName:fileName});
//		jsonStringList.push({name:'equipment'});
//		jsonStringList.push({equipmentUri:uri});
		var pageType = $(this).siblings('input[name="pageType"]').val();
		if (pageType=="arinc661"){
         jQuery.ajax( {     
           type : 'POST',     
           contentType : 'application/json',
           data: JSON.stringify({dpcUri:dpcUri, pageType:pageType, id:id}),
          // data: JSON.stringify(jsonStringList),
           url : '/ManEnv/displayDesignPattern/info',   
           dataType : 'json',
           success : function(result) {  
        	   $("#page_name_info").text(result.page_name_info);
        	   $("#page_type_info").text(result.page_type_info);
        	   //$("#display_frequency_info").text(result.display_frequency_info);
        	   $("#scade_file_info").attr("onclick", "window.location.href='/ManEnv/" + result.scade_file_info + "'");
        	   //$("#scade_image_info").text(result.scade_image_info);
        	   $("#connections_info").html("");
        	   $("#scade_image").attr("href","/ManEnv/" + result.scade_image_info);
        	   $("#scade_image_small").attr("src","/ManEnv/" + result.scade_image_info);
        	   var tBody = $("#connections_info");
        	   var connections = result.connections_info.split("|");
        	   $.each(connections, function(index, value){
        		   	if (value != ""){
        		   		value = value.replace(/:suite_to_panel:/, " => ");
        		   		value = value.replace(/:panel_to_suite:/, " <= ");
        		   		var row = $("<tr></tr>");
        		    	$("<td></td>").append(value).appendTo(row);
        		    	tBody.append(row);
               		}
               });
           },     
           error : function() {     
             alert("error!");
           }
         });
         //$("#userDefineDF_page_info").hide();
         //$("#arinc661_page_info").show();
         //$("#pageData_page_info").hide();
         $(".userdefined-element").hide();
         $(".arinc661-element").show();
         $(".pageData-element").hide();
		} else if(pageType == "userDefineDF"){
			jQuery.ajax( {     
		           type : 'POST',     
		           contentType : 'application/json',
		           data: JSON.stringify({dpcUri:dpcUri, pageType:pageType, id:id}),
		          // data: JSON.stringify(jsonStringList),
		           url : '/ManEnv/displayDesignPattern/info',   
		           dataType : 'json',
		           success : function(result) {  
		        	   $("#page_name_info").text(result.page_name_info);
		        	   $("#page_type_info").text(result.page_type_info);
		        	   //$("#display_frequency_info").text(result.display_frequency_info);
		        	  
		        	   $("#static_string_info").html("");
		        	   $("#rectangle_info").html("");
		        	   $("#enter_info").html("");
		        	   $("#dynamic_string_info").html("");
		        	   $("#line_info").html("");
		        	   var static_string_body = $("#static_string_info");
		        	   var rectangle_body = $("#rectangle_info");
		        	   var enter_body = $("#enter_info");
		        	   var dynamic_string_body = $("#dynamic_string_info");
		        	   var line_body = $("#line_info");
		        	   var elements = result.elements_info.split("|");
		        	   $.each(elements, function(index, value){
		        		   	if (value != ""){
		        		   		var startIndex = 0;
		        		   		var endIndex = value.indexOf(','); //第一个逗号
		        		   		var nameTd = $("<td></td>").text( value.substring(0, endIndex).replace(/element_name:/, ""));
		        		   		startIndex = endIndex+1;
		        		   		endIndex = value.indexOf(',',startIndex);
		        		   		//var typeTd = $("<td></td>").text( value.substring(startIndex, endIndex).replace(/element_type:/, ""));
		        		   		var typeValue = value.substring(startIndex, endIndex).replace(/element_type:/, "");
		        		   		var row = null;
		        		   		if (typeValue == 'static_string'){
		        		   			startIndex = endIndex+1;
		        		   			endIndex = value.indexOf(',',startIndex);
		        		   			var xTd = $("<td></td>").text(value.substring(startIndex, endIndex).replace(/x_coordinate:/, ""));
		        		   			startIndex = endIndex+1;
		        		   			endIndex = value.indexOf(',',startIndex);
		        		   			var yTd = $("<td></td>").text(value.substring(startIndex, endIndex).replace(/y_coordinate:/, ""));
		        		   			startIndex = endIndex+1;
		        		   			endIndex = value.indexOf(',',startIndex);
		        		   			var contentTd = $("<td></td>").text(value.substring(startIndex).replace(/string_content:/, ""));
		        		   			row = $("<tr></tr>").append(nameTd).append(xTd).append(yTd).append(contentTd);
		        		   			static_string_body.append(row);
		        		   		}else if (typeValue == 'rectangle'){
		        		   			startIndex = endIndex+1;
		        		   			endIndex = value.indexOf(',',startIndex);
		        		   			var xTd = $("<td></td>").text(value.substring(startIndex, endIndex).replace(/rect_x_coordinate:/, ""));
		        		   			startIndex = endIndex+1;
		        		   			endIndex = value.indexOf(',',startIndex);
		        		   			var yTd = $("<td></td>").text(value.substring(startIndex, endIndex).replace(/rect_y_coordinate:/, ""));
		        		   			startIndex = endIndex+1;
		        		   			endIndex = value.indexOf(',',startIndex);
		        		   			var widthTd = $("<td></td>").text(value.substring(startIndex, endIndex).replace(/rect_width:/, ""));
		        		   			startIndex = endIndex + 1;
		        		   			var heightTd = $("<td></td>").text(value.substring(startIndex).replace(/rect_height:/, ""));
		        		   			row = $("<tr></tr>").append(nameTd).append(xTd).append(yTd).append(widthTd).append(heightTd);
		        		   			rectangle_body.append(row);
		        		   		}else if (typeValue == 'point'){
		        		   			startIndex = endIndex+1;
		        		   			endIndex = value.indexOf(',',startIndex);
		        		   			var xTd = $("<td></td>").text(value.substring(startIndex, endIndex).replace(/x_coordinate:/, ""));
		        		   			startIndex = endIndex+1;
		        		   			var yTd = $("<td></td>").text(value.substring(startIndex).replace(/y_coordinate:/, ""));
		        		   			row = $("<tr></tr>").append(nameTd).append(xTd).append(yTd);
		        		   			enter_body.append(row);
		        		   		}else if (typeValue == 'line'){
		        		   			startIndex = endIndex+1;
		        		   			endIndex = value.indexOf(',',startIndex);
		        		   			var startXTd = $("<td></td>").text(value.substring(startIndex, endIndex).replace(/start_x_coordinate:/, ""));
		        		   			startIndex = endIndex+1;
		        		   			endIndex = value.indexOf(',',startIndex);
		        		   			var startYTd = $("<td></td>").text(value.substring(startIndex, endIndex).replace(/start_y_coordinate:/, ""));
		        		   			startIndex = endIndex+1;
		        		   			endIndex = value.indexOf(',',startIndex);
		        		   			var endXTd = $("<td></td>").text(value.substring(startIndex, endIndex).replace(/end_x_coordinate:/, ""));
		        		   			startIndex = endIndex + 1;
		        		   			var endYTd = $("<td></td>").text(value.substring(startIndex).replace(/end_y_coordinate:/, ""));
		        		   			row = $("<tr></tr>").append(nameTd).append(startXTd).append(startYTd).append(endXTd).append(endYTd);
		        		   			line_body.append(row);
		        		   		}
		        		   		else if (typeValue == 'dynamic_var'){
		        		   			startIndex = endIndex+1;
		        		   			endIndex = value.indexOf(',',startIndex);
		        		   			var xTd = $("<td></td>").text(value.substring(startIndex, endIndex).replace(/x_coordinate:/, ""));
		        		   			startIndex = endIndex+1;
		        		   			endIndex = value.indexOf(',',startIndex);
		        		   			var yTd = $("<td></td>").text(value.substring(startIndex, endIndex).replace(/y_coordinate:/, ""));
		        		   			startIndex = endIndex+1;
		        		   			endIndex = value.indexOf(',',startIndex);
		        		   			var varIdTd = $("<td></td>").text(value.substring(startIndex, endIndex).replace(/var_id:/, ""));
		        		   			startIndex = endIndex+1;
		        		   			endIndex = value.indexOf(',',startIndex);
		        		   			var varFormulaTd = $("<td></td>").text(value.substring(startIndex).replace(/var_formula:/, ""));
		        		   			row = $("<tr></tr>").append(nameTd).append(xTd).append(yTd).append(varFormulaTd);
		        		   			dynamic_string_body.append(row);
		        		   		}
		               		}
		               });
		           },     
		           error : function() {     
		             alert("error!");
		           }     
		         });
			//$("#userDefineDF_page_info").show();
	       // $("#arinc661_page_info").hide();
	        //$("#pageData_page_info").hide();
			$(".userdefined-element").show();
	         $(".arinc661-element").hide();
	         $(".pageData-element").hide();
		}else if( pageType == "pageData"){
			jQuery.ajax( {     
		           type : 'POST',     
		           contentType : 'application/json',
		           data: JSON.stringify({dpcUri:dpcUri, pageType:pageType, id:id}),
		          // data: JSON.stringify(jsonStringList),
		           url : '/ManEnv/displayDesignPattern/info',   
		           dataType : 'json',
		           success : function(result) {  
		        	   $("#page_name_info").text(result.page_name_info);
		        	   $("#page_type_info").text(result.page_type_info);
		        	   //$("#display_frequency_info").text(result.display_frequency_info);
		        	   //$("#page_file_info").text(result.page_file_info);
		        	   //$("#page_image_info").text(result.page_image_info);
		        	   $("#page_variables_info").html("");
		        	   var tBody = $("#page_variables_info");
		        	   var variables = result.variables_info.split("|");
		        	   $.each(variables, function(index, value){
		        		   	if (value != ""){
		        		   		var startIndex = 0;
		        		   		var endIndex = value.indexOf(';'); //第一个分号
		        		   		var nameTd = $("<td></td>").text( value.substring(0, endIndex));
		        		   		startIndex = endIndex+1;
		        		   		endIndex = value.indexOf(';',startIndex);
		        		   		var typeTd = $("<td></td>").text( value.substring(startIndex, endIndex));
		        		   		startIndex = endIndex+1;
		        		   		endIndex = value.indexOf(';', startIndex);
		        		   		var valueTd = $("<td></td>").text(value.substring(startIndex,endIndex));
		        		   		startIndex = endIndex + 1;
		        		   		var methodComponentTd = $("<td></td>").text(value.substring(startIndex));
		        		   		var row = $("<tr></tr>").append(nameTd).append(typeTd).append(valueTd).append(methodComponentTd);
		        		    	tBody.append(row);
		               		}
		               });
		           },     
		           error : function() {     
		             alert("error!");
		           }     
		         });
			//$("#userDefineDF_page_info").hide();
	        //$("#arinc661_page_info").hide();
	       // $("#pageData_page_info").show();
			$(".userdefined-element").hide();
	         $(".arinc661-element").hide();
	         $(".pageData-element").show();
		}
	});
	
	$("#add_element_btn").click(function(){
		$("#add_element_panel").modal('hide');
		var num = $("#elements_table tbody tr").length + 1;  //行标
		var numTd = $("<td></td>").text(num);   //行标td
		var typeRadio = $("#element_radio_group input[checked]");  //取得单选框
		var typeTd = $("<td></td>").text( typeRadio.parent().text() );
		var elementName = $("#element_name").val();
		var elementNameTd = $("<td></td>").text(elementName);
		var elements = $("input[name='pageElements']").val();  //获取原来的值
		//element name
		elements+="element_name:";
		elements+=elementName;
		elements+=",";
		//element type
		elements+="element_type:";
		elements+=typeRadio.val();
		elements+=",";
		switch(typeRadio.val()){
		case 'static_string':
			//x coordinate
			elements+="x_coordinate:";
			elements+= $("input[name='x_coordinate']").val();
			elements+=",";
			//y coordinate
			elements+="y_coordinate:";
			elements+= $("input[name='y_coordinate']").val();
			elements+=",";
			//string content
			elements+="string_content:";
			elements+= $("input[name='string_content']").val();
			elements+="|";
			break;
		case 'dynamic_var':
			//x coordinate
			elements+="x_coordinate:";
			elements+= $("input[name='dynamic_x_coordinate']").val();
			elements+=",";
			//y coordinate
			elements+="y_coordinate:";
			elements+= $("input[name='dynamic_y_coordinate']").val();
			elements+=",";
			//var type
			elements+="var_id:";
			elements+= $("select[name='var_id']").val();
			elements+=",";
			//var formula
			elements+="var_formula:";
			elements+= $("input[name='var_formula']").val();
			elements+="|";
			break;
		case 'point':
			//x coordinate
			elements+="x_coordinate:";
			elements+= $("input[name='point_x_coordinate']").val();
			elements+=",";
			//y coordinate
			elements+="y_coordinate:";
			elements+= $("input[name='point_y_coordinate']").val();
			elements+="|";
			break;
		case 'line':
			//start x coordinate
			elements+="start_x_coordinate:";
			elements+= $("input[name='start_x_coordinate']").val();
			elements+=",";
			//start y coordinate
			elements+="start_y_coordinate:";
			elements+= $("input[name='start_y_coordinate']").val();
			elements+=",";
			//end x coordinate
			elements+="end_x_coordinate:";
			elements+= $("input[name='end_x_coordinate']").val();
			elements+=",";
			//string content
			elements+="end_y_coordinate:";
			elements+= $("input[name='end_y_coordinate']").val();
			elements+="|";
			break;
		case 'rectangle':
			//center x coordinate
			elements+="rect_x_coordinate:";
			elements+= $("input[name='rect_x_coordinate']").val();
			elements+=",";
			//y coordinate
			elements+="rect_y_coordinate:";
			elements+= $("input[name='rect_y_coordinate']").val();
			elements+=",";
			//width
			elements+="rect_width:";
			elements+= $("input[name='rect_width']").val();
			elements+=",";
			//height
			elements+="rect_height:";
			elements+= $("input[name='rect_height']").val();
			elements+="|";
			break;
		}
		var tr = $("<tr></tr>").append(numTd).append(elementNameTd).append(typeTd);  //拼成一行
		
		$("input[name='pageElements']").val(elements); //写入隐藏的字段
		$("#elements_table tbody").append(tr);  //行加到 tbody
	});
	
//	$("#add_variable_btn").click(function(){
//		$("#add_variable_panel").modal('hide');
//		var num = $("#variables_table tbody tr").length + 1;  //行标
//		var numTd = $("<td></td>").text(num);   //行标td
//		var typeRadio = $("#variable_radio_group input[checked]");  //取得单选框
//		var typeTd = $("<td></td>").text( typeRadio.parent().text() );
//		var variableName = $("#variable_name").val();
//		var variableNameTd = $("<td></td>").text(variableName);
//		var variables = $("input[name='variables']").val();  //获取原来的值
//		//variable name
//		variables+="variable_name:";
//		variables+=variableName;
//		variables+=",";
//		//variable type
//		variables+="variable_type:";
//		variables+=typeRadio.val();
//		variables+=",";
//		switch(typeRadio.val()){
//		case 'display_data':
//			variables+="variable_value:";
//			variables+= $("#display_data_area option:selected").val();
//			variables+="|";
//			break;
//		case 'data_entity':
//			variables+="variable_value:";
//			variables+= $("#data_entity_area option:selected").val();
//			variables+="|";
//			break;
//		}
//		var tr = $("<tr></tr>").append(numTd).append(variableNameTd).append(typeTd);  //拼成一行
//		
//		$("input[name='variables']").val(variables); //写入隐藏的字段
//		$("#variables_table tbody").append(tr);  //行加到 tbody
//	});
	
	//change the value of the checkbox
	//$("input[name='isMain']").on('click',function(){
	//	if ($("input[name='isMain']").is(':checked')){
	//		$("input[name='isMain']").val("true");
	//	}else{
	///		$("input[name='isMain']").val("false");
	//	}
	//});
//	$("input[name='isMain']").on('click',function(){
//		if ($("input[name='isMain']")).each(){
//			
//		}
//		
//	});
});

function changeSelectPosition(value){
	if (value == "") return
	var indexs = value.split(",");
	xIndex = indexs[0];
	yIndex = indexs[1];
	$(".xIndex").each(function(){
		$(this).val(xIndex);
	});
	$(".yIndex").each(function(){
		$(this).val(yIndex);
	});
}

function deleteDisplayZone(displayZoneId, deleteBtn) {
	//var uri = $(deleteBtn).siblings('input').val();
	var projectId = $("input[name='projectId']").val();
	$.ajax({
		url : '/ManEnv/displayZone/' + projectId + "/" + displayZoneId,
		type : 'DELETE',
		success : function(data) {
            if (data.result == "true") {
                 alert("删除成功!");
                 $(deleteBtn).parents("tr").remove(); // 删除第一个tr元素
            } else {
                 alert("删除失败!");
            }
       }
	});
};

//删除
function deletePage(id, deleteBtn){
	var dpcUri = $("input[name='dpcUri']").val();
	//var id = $(this).siblings('input').val();
	var projectId = $("input[name='projectId']").val();
	$.post('/ManEnv/displayDesignPattern/delete',
			{dpcUri:dpcUri,  name:'id', value:id, projectId : projectId},
			function(data){
				if(data.result == "true"){
					alert("删除成功!");
					$(deleteBtn).parents("tr").remove(); // 删除第一个tr元素
				}else{
					alert("删除失败!");
				}
			});
};


function deleteVariable(variableId, deleteBtn) {
	//var vId = $(deleteBtn).siblings('input').val();
	var projectId = $("input[name='projectId']").val();
	$.ajax({
		url : '/ManEnv/variable/' + projectId + "/" + variableId,
		type : 'DELETE',
		success : function(data) {
            if (data.result == "true") {
                 alert("删除成功!");
                 $(deleteBtn).parents("tr").remove(); // 删除第一个tr元素
            } else {
                 alert("删除失败!");
            }
       }
	});
};

function showDisplayZoneDeletePanel(displayZoneId, deleteBtn){
    $("#delete-display-zone-panel").modal({
        "show" : true,
        "backdrop" : false
    });
    //先消除其他的绑定事件
    $("#delete-display-zone-btn").unbind("click");
    $("#delete-display-zone-btn").click(function(){
    	deleteDisplayZone(displayZoneId, deleteBtn);
    });
}

function showVariableDeletePanel(variableId, deleteBtn){
    $("#delete-page-variable-panel").modal({
        "show" : true,
        "backdrop" : false
    });
    $("#delete-page-variable-btn").unbind("click");
    $("#delete-page-variable-btn").click(function(){
    	deleteVariable(variableId, deleteBtn);
    });
}

function showPageDeletePanel(pageId, deleteBtn){
    $("#delete-page-panel").modal({
        "show" : true,
        "backdrop" : false
    });
    $("#delete-page-btn").unbind("click");
    $("#delete-page-btn").click(function(){
    	deletePage(pageId, deleteBtn);
    });
}

function toggleAddPageElement(){
	$("#add-page-element-div").toggle("normal");
}

function addPageElement(){
	$("#add_variable_panel").modal('hide');
	
	var name = $("#variable-name").val();
	var displayZoneId = $("#display-zone-id").val();
	var code = $("#page-element-code").val();
	var drawMethodLink = $("#draw-method").val();
	var v = name+ ";" + displayZoneId + ";" + code + ";" + drawMethodLink;
	var input = '<input type="hidden" name="pageElements" value="' + v + '">';
	
	var deleteTd = $("<td></td>").html("<div onclick='removeRow(this)'><i class='icon-remove'>" + input + "</div>");
	var nameTd = $("<td></td>").text(name);
	var displayZoneTd = $("<td></td>").text($("#display-zone-id option:selected").text());
	var codeTd = $("<td></td>").text(code);
	var drawMethodTd = $("<td></td>").text($("#draw-method option:selected").text());
	
	var tr = $("<tr></tr>").append(deleteTd).append(nameTd).append(displayZoneTd).append(codeTd).append(drawMethodTd);
	
//	$("input[name='variables']").val(variables); //写入隐藏的字段
	$("#variables_table tbody").append(tr);  //行加到 tbody
}

function removeRow(deleteBtn){
	$(deleteBtn).parents("tr").remove(); // 删除第一个tr元素
}








